<script setup lang="ts">
import type { MultipleConditionSearchSchema } from '@/components/multiple-condition-search'
import { getSendRecordListApi } from '@/apis/modules/message'
import MultipleConditionSearch from '@/components/multiple-condition-search'
import SendStatus from './SendStatus.vue'
import useConfig from './useConfig'

const { columns } = useConfig()
const queryParams = ref({
  role_type: '',
  begin_time: '',
  end_time: '',
})
const {
  data: tableData,
  pagination,
  loading,
  run,
} = useListRequest(getSendRecordListApi, {
  immediate: true,
  params: queryParams,
})
const { createSortChange } = useTable(run, tableData)
const handleTableSortChange = createSortChange(queryParams)
const dateRange = ref<string[]>([])
watch(dateRange, () => {
  const [start, end] = dateRange.value || []
  queryParams.value.begin_time = start || ''
  queryParams.value.end_time = end ? (Number(end) + 86400).toString() : ''
  run()
})

function toMailDetailPage(id: string) {
  window.open(`/dev-ops-monitor/alarm-record/${id}`)
}
const filterSchemes: MultipleConditionSearchSchema = {
  placeholder: '默认按照邮件标题搜索',
  widgets: [
    {
      type: 'input',
      field: 'title',
      label: '邮件标题',
      placeholder: '请输入邮件标题搜索',
    },
    {
      type: 'input',
      field: 'content',
      label: '邮件内容',
      placeholder: '请输入邮件内容搜索',
    },
    {
      type: 'input',
      field: 'email',
      label: '收件人邮箱',
      placeholder: '请输入收件人邮箱搜索',
    },
  ],
}
</script>

<template>
  <main-container
    :loading="loading"
    :pagination="pagination"
    @run="run"
  >
    <template #header>
      <a-range-picker
        v-model="dateRange"
        show-time
        value-format="X"
        :placeholder="['选择开始时间', '选择结束时间']"
        class="w-100!"
      >
        <template #suffix-icon>
          <i-icons-calendar class="mt-1" />
        </template>
      </a-range-picker>
      <a-select
        v-model="queryParams.role_type"
        placeholder="请选择分类"
        :options="sendMessageRoleTypeOptions"
        class="!w-34"
        @change="run"
      />
      <multiple-condition-search
        v-model="queryParams"
        :schema="filterSchemes"
        @search="run"
      />
    </template>
    <a-table
      v-bind="commonTableProps"
      :columns="columns"
      :data="tableData"
      @sorter-change="handleTableSortChange"
    >
      <template #status="{ record }">
        <send-status :status="record?.send_status_type" />
      </template>
      <template #actions="{ record }">
        <a-link @click="toMailDetailPage(record.id)">
          <i-icons-show class="text-primary-6" />
        </a-link>
      </template>
    </a-table>
  </main-container>
</template>

<style lang="less" scoped>
.arco-picker {
  @apply bg-white!;
}
</style>
